{% extends "Industrial_Logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
{% endblock header %}
{% block content %}

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uYQuzkZDf3GKEiiRcsudnAY5F8FZqlEo"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
    <script src="{{STATIC_URL}}dist/js/OtherCharts.js"></script>
    <link rel="stylesheet" href="{{STATIC_URL}}css/pageStyle.css" charset="utf-8">
    <div id="back" class="main" >
        <h1>传感器信息</h1>
{#        <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>#}
        <div id="all">
<!--            lzz新增 -->
            <div style="border:0px;width:15%;height: 100%;float:left" id="device_localtion">
                <p>实验室</p>
                {% for id in idname %}
                <a href="http://127.0.0.1:8000/realTemAndHum/{{id.id}}/">{{id.name}}</a>
                <br>
                {% endfor %}
              </div>

            <div style="border:2px solid #666;width:80%;height: 100%;float:left" id="map"  class="chart-container"></div>
        </div>
    </div>

<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
      changeMapStyle();//设置地图样式（底色）
    }
    function createMap(){
      map = new BMap.Map("map");
<!--      lzz修改-->
      map.centerAndZoom(new BMap.Point(113.193115,33.779533),17);

    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [

<!--        lzz修改-->113.19373,33.781274
        {content:"河南城建学院十号楼A206",title:"十号楼A座",imageOffset: {width:0,height:-21},position:{lat:33.777376,lng:113.19314}},
        {content:"河南城建学院图书馆",title:"图书馆",imageOffset: {width:0,height:-21},position:{lat:33.778629,lng:113.19181}},
        {content:"河南城建学院",title:"河南城建学院",imageOffset: {width:0,height:-21},position:{lat:33.779533,lng:113.193115}},
        {content:"河南城建学院",title:"二号楼A座",imageOffset: {width:0,height:-21},position:{lat:33.780877,lng:113.194053}}


      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(22,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }

function changeMapStyle(style){
    var mapStyle ={
        features: ["road","building","water","land"],//隐藏地图上的"poi",
        style : "midnight",
    };
    map.setMapStyle(mapStyle);
}
    var map;
      initMap();
  </script>
{% endblock content %}
